<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SB Admin 2 - Bootstrap Admin Theme</title>

    <!-- Bootstrap Core CSS -->
    <link href="../../components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../../components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../../components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!--bootstrapValidator-->
    <link href="../../components/validator/css/bootstrapValidator.min.css" rel="stylesheet" type="text/css">

    <!-- Ztree -->
    <link href="../components/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css">

    <!-- simply-toast -->
    <link href="../components/simply-toast/css/simply-toast.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        /* Ztree select style */
        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 220px;
            height: 360px;
            overflow-y: scroll;
            overflow-x: auto;
        }

    </style>
</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Site Admin</a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-messages">
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                            </div>
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                            </div>
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <strong>John Smith</strong>
                                    <span class="pull-right text-muted">
                                        <em>Yesterday</em>
                                    </span>
                            </div>
                            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>Read All Messages</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-messages -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-tasks">
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 1</strong>
                                    <span class="pull-right text-muted">40% Complete</span>
                                </p>

                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                        <span class="sr-only">40% Complete (success)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 2</strong>
                                    <span class="pull-right text-muted">20% Complete</span>
                                </p>

                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        <span class="sr-only">20% Complete</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 3</strong>
                                    <span class="pull-right text-muted">60% Complete</span>
                                </p>

                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <p>
                                    <strong>Task 4</strong>
                                    <span class="pull-right text-muted">80% Complete</span>
                                </p>

                                <div class="progress progress-striped active">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                        <span class="sr-only">80% Complete (danger)</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>See All Tasks</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-tasks -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-alerts">
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-comment fa-fw"></i> New Comment
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-twitter fa-fw"></i> 3 New Followers
                                <span class="pull-right text-muted small">12 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-envelope fa-fw"></i> Message Sent
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-tasks fa-fw"></i> New Task
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#">
                            <div>
                                <i class="fa fa-upload fa-fw"></i> Server Rebooted
                                <span class="pull-right text-muted small">4 minutes ago</span>
                            </div>
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a class="text-center" href="#">
                            <strong>See All Alerts</strong>
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-alerts -->
            </li>
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                                <span class="input-group-btn">
                                <button class="btn btn-default" type="button">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                        </div>
                        <!-- /input-group -->
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="flot.html">Flot Charts</a>
                            </li>
                            <li>
                                <a href="morris.html">Morris.js Charts</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>
                    </li>
                    <li>
                        <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="panels-wells.html">Panels and Wells</a>
                            </li>
                            <li>
                                <a href="buttons.html">Buttons</a>
                            </li>
                            <li>
                                <a href="notifications.html">Notifications</a>
                            </li>
                            <li>
                                <a href="typography.html">Typography</a>
                            </li>
                            <li>
                                <a href="icons.html"> Icons</a>
                            </li>
                            <li>
                                <a href="grid.html">Grid</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span
                                class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="#">Second Level Item</a>
                            </li>
                            <li>
                                <a href="#">Second Level Item</a>
                            </li>
                            <li>
                                <a href="#">Third Level <span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Third Level Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Third Level Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Third Level Item</a>
                                    </li>
                                    <li>
                                        <a href="#">Third Level Item</a>
                                    </li>
                                </ul>
                                <!-- /.nav-third-level -->
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="blank.html">Blank Page</a>
                            </li>
                            <li>
                                <a href="login.html">Login Page</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-files-o fa-fw"></i> 用户管理<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="/role/role.html">角色列表</a>
                            </li>
                            <li>
                                <a href="/user/user.html">用户列表</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-files-o fa-fw"></i> 新闻管理<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="/news/news.html">新闻列表</a>
                            </li>
                        </ul>
                        <!-- /.nav-second-level -->
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="page-header">新增用户</h2>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        填写用户信息
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <form id="form-user" role="form">

                                    <input type="hidden" id="id" name="user[id]"/>

                                    <div class="form-group">
                                        <label>角色</label>
                                        <select class="form-control" id="roleCode" name="roleCode"></select>
                                    </div>
                                    <div class="form-group">
                                        <label>用户名</label>
                                        <input class="form-control" id="username" name="user[username]" placeholder="密码">
                                    </div>
                                    <div class="form-group">
                                        <label>密码</label>
                                        <input class="form-control" type="password" id="password" name="user[password]" placeholder="密码">
                                    </div>
                                    <div class="form-group">
                                        <label>确认密码</label>
                                        <input class="form-control" type="password" id="confirmPassword" name="confirmPassword"
                                               placeholder="再次输入密码">
                                    </div>
                                    <div class="form-group">
                                        <label>昵称</label>
                                        <input class="form-control" id="nickName" name="user[nickName]" placeholder="昵称">
                                    </div>
                                    <div class="form-group">
                                        <label>真实姓名</label>
                                        <input class="form-control" id="trueName" name="user[trueName]" placeholder="真实姓名">
                                    </div>
                                    <div class="form-group">
                                        <label>手机号</label>
                                        <input class="form-control" id="cellphone" name="user[cellphone]" placeholder="手机号">
                                    </div>
                                    <div class="form-group">
                                        <label>邮箱</label>
                                        <input class="form-control" id="email" name="user[email]" placeholder="邮箱">
                                    </div>
                                    <div class="form-group">
                                        <label>状态</label>
                                        <select class="form-control" name="user[state]">
                                            <option value="on">on</option>
                                            <option value="off">off</option>
                                        </select>
                                    </div>
                                </form>
                            </div>
                            <!-- /.col-lg-12 -->
                        </div>
                        <!-- /.row (nested) -->
                    </div>
                    <!-- /.panel-body -->
                    <div class="panel-footer">
                        <button type="button" class="btn btn-primary" id="btn-save">保存</button>
                        <button type="reset" class="btn btn-default" id="btn-reset">重置</button>
                    </div>
                    <!-- /.panel-footer -->
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->

<div id="menuContent" class="menuContent" style="display:none; position: absolute; z-index: 99999">
    <ul id="treeDemo" class="ztree" style="margin-top:0; width:392px;"></ul>
</div>
<!-- /#ztree select content -->

<!-- jQuery -->
<script src="../../components/jquery/dist/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="../../components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../../components/metisMenu/dist/metisMenu.min.js"></script>

<!-- serializejson -->
<script src="../../components/serializejson/jquery.serializejson.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="../../dist/js/sb-admin-2.js"></script>

<!-- bootstrapValidator -->
<script src="../../components/validator/js/bootstrapValidator.min.js"></script>

<!-- Ztree -->
<script src="../components/zTree_v3/js/jquery.ztree.core-3.5.min.js"></script>
<script src="../components/zTree_v3/js/jquery.ztree.excheck-3.5.min.js"></script>

<!-- simply-toast -->
<script src="../components/simply-toast/js/simply-toast.min.js"></script>

<!-- System JavaScript-->
<script src="../js/system.js"></script>

<script>
    $(function () {
        // id
        var id = getURLParameter("id");
        // 是否需要重新验证用户名
        var revalidUsername = false;
        var originName;

        // 初始化角色下拉框
        (function() {
            var $sel = $("#roleCode").empty().append("<option value=''>-- 请选择 --</option>");
            $.ajax({
                async: false,
                url: _api_server + "/role/list",
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                success: function (data) {
                    if(data != null && data != undefined) {
                        $.each(data, function(index, item){
                            $sel.append("<option value='"+item.code+"'>"+item.name+"</option>");
                        });
                    }
                },
                error: function () {
                    $.simplyToast("danger", "获取角色列表失败");
                }
            });
        })();

        // 用户名改变监听
        $("#username").change(function() {
            if(originName != $(this).val()) {
                revalidUsername = true;
            }
        });

        // 初始化编辑表单
        (function() {
            $.ajax({
                url : "http://localhost:8080/user/get/" + id,
                type : "POST",
                contentType : "application/json",
                dataType : "json",
                success : function(data) {
                    $("#id").val(data.user.id);
                    $("#roleCode").val(data.user.role.code);
                    $("#username").val(data.user.username);
                    $("#password").val(data.user.password);
                    $("#confirmPassword").val(data.user.password);
                    $("#nickName").val(data.user.nickName);
                    $("#trueName").val(data.user.trueName);
                    $("#cellphone").val(data.user.cellphone);
                    $("#email").val(data.user.email);
                    $("#state").val(data.user.state);

                    originName = data.user.username;
                },
                error : function() {
                    alert("请检查输入");
                }
            });
        })();

        // 保存
        $("#btn-save").click(function () {
            var $form = $("#form-user");
            $form.bootstrapValidator(options);
            var validator = $form.data('bootstrapValidator');
            validator.enableFieldValidators('user[username]', revalidUsername);

            var valid = validator.validate().isValid();
            if (!valid) return false;

            var userForm = $form.serializeJSON();

            var param = JSON.stringify(userForm);

            console.log(param);

            $.ajax({
                url: "http://localhost:8080/user/update",
                data: param,
                type: "POST",
                contentType: "application/json",
                dataType: "json",
                success: function () {
                    $.simplyToast("保存成功", "success");
                },
                error: function () {
                    $.simplyToast("danger", "操作失败");
                }
            });
        });

        // 重置
        $("#btn-reset").click(function () {
            $.simplyToast("success", "success");
            $.simplyToast("info", "info");
            $.simplyToast("warning", "warning");
            $.simplyToast("danger", "danger");
        });

    });

    /**
     * 表单验证参数
     * @type {{feedbackIcons: {valid: string, invalid: string, validating: string}, fields: {groupSel: {validators: {notEmpty: {message: string}}}, username: {trigger: string, validators: {notEmpty: {message: string}, regexp: {regexp: RegExp, message: string}, remote: {type: string, url: string, message: string, delay: number}}}, password: {validators: {notEmpty: {message: string}, regexp: {regexp: RegExp, message: string}, identical: {field: string, message: string}}}, confirmPassword: {enabled: boolean, selector: string, validators: {notEmpty: {message: string}, regexp: {regexp: RegExp, message: string}, identical: {field: string, message: string}}}, email: {validators: {emailAddress: {message: string}}}, trueName: {validators: {notEmpty: {message: string}}}}}}
     */
    var options = {
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        excluded: [':disabled', ':hidden', ':not(:visible)'],
        fields: {
            "roleCode": {
                validators: {
                    notEmpty: {
                        message: '请选择角色'
                    }
                }
            },
            "user[username]": {
                selector: '#username',
                trigger: 'blur',
                validators: {
                    notEmpty: {
                        message: '请输入用户名'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_]{1,16}$/,
                        message: '只能输入1~16位数字、字母、_'
                    },
                    remote: {
                        type: 'POST',
                        url: _api_server + '/user/valid',
                        message: '用户名已存在',
                        delay: 1000
                    },
                }
            },
            "user[password]": {
                selector: '#password',
                validators: {
                    notEmpty: {message: '请输入密码'},
                    regexp: {
                        regexp: /^[0-9a-zA-Z_-]{1,16}$/,
                        message: '只能输入1~16位数字、字母、_、-'
                    },
                    identical: {
                        field: 'confirmPassword',
                        message: '两次输入的密码不一致'
                    }
                }
            },
            "confirmPassword": {
                selector: '#confirmPassword',
                validators: {
                    notEmpty: {message: '请确认密码'},
                    regexp: {
                        regexp: /^[0-9a-zA-Z_-]{1,50}$/,
                        message: '只能输入数字、字母、_、-'
                    },
                    identical: {
                        field: 'user[password]',
                        message: '两次输入的密码不一致'
                    }
                }
            },
            "user[email]": {
                selector: '#email',
                validators: {
                    emailAddress: {message: 'Email格式不正确'}
                }
            },
            "user[trueName]": {
                selector: '#trueName',
                validators: {
                    notEmpty: {
                        message: '请输入真实姓名'
                    }
                }
            }
        }
    };

</script>


</body>

</html>
